<template>
    <div class="login-container">
        医院设置列表

        <!-- 条件查询 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="医院名称">
                <el-input v-model="searchObj.hosname" placeholder="请输入医院名称"></el-input>
            </el-form-item>
            <el-form-item label="医院编号">
                <el-input v-model="searchObj.hoscode" placeholder="请输入医院编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList()">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="list" style="width: 100%" @selection-change="handleselectionChange">
            <el-table-column type="selection" label="序号" width="50"/>
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column prop="hosname" label="医院名称" width="200"/>
            <el-table-column prop="hoscode" label="医院编号" width="200"/>
            <el-table-column prop="apiUrl" label="api基础路径" width="200"/>

            <el-table-column prop="contactsName" label="联系人" width="80">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.contactsName }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="contactsPhone" label="联系人手机" width="120"/>

            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    {{ scope.row.status === 1 ? '可用' : '不可用' }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="280" algin="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除
                    </el-button>
                  <!--锁定和解锁-->
                  <el-button v-if="scope.row.status==1" type="warning" size="mini" @click="lockHospSet(scope.row.id,0)">锁定
                  </el-button>
                  <el-button v-if="scope.row.status==0" type="success" size="mini" @click="lockHospSet(scope.row.id,1)">解锁
                  </el-button>

                  <router-link :to="'/hospSet/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                  </router-link>

                </template>
            </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-pagination
            :current-page="current"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"/>
    </div>

</template>

<script>
//导入  接口定义的js文件
import hospset from '@/api/hospset'

export default ({

    //数据对象
    data(){
        return{
            current:1,      //当前页
            limit:10,      //每页记录数
            searchObj:{},  //条件封装的对象
            list:[],       //每页数据集合
            total:0,       //总记录数
            multipleSelection:[]    //批量选中记录
        }
    },

    //页面渲染
    created(){
        //调用methods定义的方法，得到数据
        this.getList()
    },


    //定义方法，调用接口的请求
    methods:{
      //添加医院设置

      //锁定和解锁
      lockHospSet(id,status){
        hospset.lockHospitalSet(id,status)
        .then(response=>{
          this.getList()
        })
      },
      //获取复选框的id值
      handleselectionChange(selection){
          //将复选框的值封装到multipleSelection
          //console.log(selection)
          this.multipleSelection=selection
      },

      //批量删除
      removeRows(){
          this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              var idList=[]
              //遍历集合，拿到每个id 再把id设置到idList集合中
              for(var i=0;i<this.multipleSelection.length;i++){
                  var obj=this.multipleSelection[i]
                  var id=obj.id
                  idList.push(id)
              }
              //调用接口删除
              //console.log(idList)
              hospset.batchRemove(idList)
              .then(response=>{
                  this.$message({
                      type: 'success',
                      message: '删除成功!'
                  });
                  //刷新页面
                  this.getList(1)
              })
          })
      },

      //医院设置列表
      getList(page=1){//添加当前页参数
          this.current=page
          hospset.getHospSetList(this.current,this.limit,this.searchObj)
          .then(response =>{
              console.log(response)
              this.list = response.data.records
              this.total = response.data.total
          })
          .catch(error =>{
              console.log(error)
          })
      },

      //删除医院设置
      removeById(id){
          this.$confirm('此操作将永久删除医院设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              //调用接口
              hospset.deleteHospSet(id)
              .then(response =>{
                  this.$message({
                      type: 'success',
                      message: '删除成功!'
                  });
                  //刷新页面
                  this.getList(1)
              })
          })
      }
    }
})
</script>
